const React = require('react');
const {
  View,
  StyleSheet,
} = require('react-native');
const {
  JDDevice,
  JDButton,
  JDText,
  JDRouter,
  JDRadioGroup,
  JDRadio,
} = require('@areslabs/jdreact-core-lib');
const { NavigationBar } = JDRouter;

const COLORS = [
  {
    color: '#F00',
    text: '红色'
  },
  {
    color: '#0F0',
    text: '绿色'
  },
  {
    color: '#00F',
    text: '蓝色'
  },
];

const BUY_CATEGORY = [
  {
    id: 1,
    title: '30天免息',
    description: '不分期，无手续费',
  },
  {
    id: 2,
    title: '分期价：￥1000 x 3期',
    description: '含手续费：每期￥0.00，费率0.00%',
  },
  {
    id: 3,
    title: '分期价：￥500 x 6期',
    description: '含手续费：每期￥0.00，费率0.00%',
  },
  {
    id: 4,
    title: '分期价：￥200 x 15期',
    description: '含手续费：每期￥0.00，费率0.00%',
  },
  {
    id: 5,
    title: '分期价：￥100 x 30期',
    description: '含手续费：每期￥0.00，费率0.00%',
  },
]

class JDRadioGroupExample extends React.Component {
  state = {
    selectedColor: COLORS[0],
    selectedCategory: BUY_CATEGORY[0],
  };

  render() {
    return (
      <View style={styles.wrapper}>
        <NavigationBar Title="多选一" />
        <View style={styles.body}>
          <View><JDText>颜色</JDText></View>
            <JDRadioGroup
              options={COLORS}
              selectedOption={this.state.selectedColor}
              onSelect={(...args) => { this.onSelect('selectedColor', ...args); }}
              renderOption={this.renderColorOption}
              style={styles.colorRadioGroup}
              />
          <View style={{marginTop: 20}}><JDText>购买方式</JDText></View>
            <JDRadioGroup
              options={BUY_CATEGORY}
              selectedOption={this.state.selectedCategory}
              onSelect={(...args) => { this.onSelect('selectedCategory', ...args); }}
              renderOption={this.renderCategoryOption}
              style={styles.radioGroup}
              />
        </View>
      </View>
    )
  }

  onSelect = (key, value, index) => {
    this.setState({[key]: value});
  };

  renderColorOption = (value, index, isSelected) => {
    return (
      <View style={[styles.optWrapper, isSelected ? {borderColor: '#F00'} : null]}>
        <JDText style={isSelected ? {color: '#F00'} : null}>{value.text}</JDText>
      </View>
    )
  };

  renderCategoryOption = (value, index, isSelected) => {
    return (
      <View style={{flexDirection: 'row', alignItems: 'center', paddingVertical: 10, borderBottomWidth: 0.5, borderBottomColor: '#666'}}>
        <JDRadio selected={isSelected} style={{marginRight: 10}} />
        <View>
          <JDText>{value.title}</JDText>
          <JDText>{value.description}</JDText>
        </View>
      </View>
    )
  };
}

const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
  },
  body: {
    flex: 1,
    padding: JDDevice.getRpx(20),
  },

  colorRadioGroup: {
    flexDirection: 'row',
    marginTop: 10,
  },
  optWrapper: {
    margin: 5,
    justifyContent: 'center',
    alignItems: 'center',
    width: 60,
    height: 30,
    borderWidth: 0.5,
    borderColor: '#000',
    borderRadius: 4,
  }

});

module.exports = JDRadioGroupExample;